<template>
  <div class="right-panel">
    <dv-border-box-8 class="weather-box">
      <weather-forecast />
    </dv-border-box-8>
    <dv-border-box-8 class="data-box">
      <traceability-data />
    </dv-border-box-8>
    <dv-border-box-8 class="chart-box">
      <device />
    </dv-border-box-8>
  </div>
</template>

<script setup>
import WeatherForecast from './RightComponets/WeatherForecast.vue'
import TraceabilityData from './RightComponets/TraceabilityData.vue'
import Device from "@/views/dashboard/RightComponets/Device.vue";
</script>

<style lang="scss" scoped>
.right-panel {
  width: 20%;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-bottom: 50px;

  .weather-box,
  .data-box,
  .chart-box {
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .weather-box {
    flex: 0.6;
  }

  .data-box {
    flex: 0.8;
  }

  .chart-box {
    flex: 1.5;
    margin-bottom: 20px;
  }
}
</style>
